<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/common/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/common/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/common/bootstrap/js/bootstrap-tab.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/common/bootstrap/css/bootstrap.css" type="text/css"></link>
<script type="text/javascript" src="<%=request.getContextPath() %>/common/bootstrap/js/collapse.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/common/bootstrap/js/transition.js"></script></head>
<body>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">基本信息</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">工作经历</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">项目介绍</a></li>
    <li  class="dropdown"><a href="#" aria-controls="dropdown-toggle"  data-toggle="dropdown">Settings   <b class="caret"></b></a>
    	<ul class="dropdown-menu">
               <li><a href="#"><i class="glyphicon glyphicon-user"></i>  &nbsp;  ${basicinfo.realname }</a></li>
               <li class="divider"></li>
               <li><a href="#"><i class="glyphicon glyphicon-th-large"></i>&nbsp; 查看</a></li>
               <li class="divider"></li>
               <li><a href="#"><i class="glyphicon glyphicon-link"></i>&nbsp; 友情链接</a></li>
            </ul>
            
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    	<table class="table table-condensed">
			  <tr>     
			   	<th>姓名：</th>    
			    <td>${basicinfo.realname }</td>    
			  	 </tr> 
			    <tr>  
			        <th>年龄：</th> 
			        <td>${basicinfo.age }</td>  
			    </tr> 
			    <tr>  
			        <th>性别：</th> 
			        <td>${basicinfo.sex }</td>  
			    </tr> 
			    <tr>  
			        <th><abbr title="Phone">P:</abbr></th> 
			        <td>${basicinfo.phone }</td>  
			    </tr> 
			    <tr>  
			        <th><abbr title="eMail">M:</abbr></th> 
			        <td>${basicinfo.mail }</td>  
			    </tr> 
			    <tr>  
			        <th>项目数量:</th> 
			        <td>${basicinfo.items }</td>  
			    </tr> 
			    <tr>  
			        <th>公司经历:</th> 
			        <td><p>${basicinfo.throughs }家</p></td>  
			    </tr> 
			     
    	</table>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
    	<table class="table table-condensed">
			 <thead>
				<tr>     
				 <th>公司名称</th>  
			     <th>入职时间</th>   
			     <th>离职时间</th>   
	      		</tr>  
	      	</thead> 
	       	<tbody> 
	        	<c:forEach items="${throughs }" var="t">
	        		 <tr>   
	             		<td>${t.companyname }</td> 
	               		<td>${t.startdate }</td>
	               		<td>${t.enddate }</td>
	            	 </tr> 
	        	</c:forEach>
	        </tbody>
		</table>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
	      <div class="panel-group" id="accordion">
		  	<c:forEach items="${items }" var="it" varStatus="s">
		 		 <div class="panel panel-success">
				    <div class="panel-heading">
				      <h4 class="panel-title">
				        <a data-toggle="collapse" data-parent="#accordion" 
				          href="#${s.count}">
				     	   ${it.itemname }
				        </a>
				      </h4>
				    </div>
				    <div id="${s.count }" class="panel-collapse collapse in">
				      <div class="panel-body">
				      	<table class="table table-bordered">
				      		<tr>
				      			<th>描述：</th>
				      			<td> ${it.itemcontent }</td>
				      		</tr>
				      		<tr>
				      			<th>职责：</th>
				      			<td> ${it.itemduty }</td>
				      		</tr>
				      	</table>
				     
				      </div>
				    </div>
			 	 </div>
		 	 </c:forEach>
		</div>

    </div>
  </div>

</div>
</body>
</html>